<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>

    .tab {
        width: 200px;
        min-height: 100px;
        background: lightblue;
    }
    .tab a {
        text-decoration: none;
        color: inherit;
    }

    .title {
        display: flex;
        justify-content: space-between;
    }

    .tab .active {
        color: lightcoral;
        border-bottom: 2px solid lightcoral;
    }

    .content .item {
        display: none;
    }

    .content .content-active {
        display: block;
    }

</style>

<body>
    <div class="tab">
        <div class="title">
            <div><a data-id="0" class="active" href="javascript:;">tab1</a></div>
            <div><a data-id="1" href="javascript:;">tab2</a></div>
            <div><a data-id="2" href="javascript:;">tab3</a></div>
        </div>
        <div class="content">
            <div class="item content-active">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </div>
</body>

<script>

    const tab = document.querySelector('.tab');
    tab.addEventListener('click', e => {
        if (e.target.tagName !== "A") {
            return;
        }
        console.log(e.target.tagName);
        const titles = document.querySelectorAll('.tab .title a');
        console.log(titles);
        titles.forEach(t => {
            t.classList.remove('active');
        })
        e.target.classList.add('active');

        console.log(e.target.dataset.id);
        const content = document.querySelectorAll('.content .item');
        content.forEach(c => {
            c.classList.remove('content-active')
        });
        content[e.target.dataset.id].classList.add('content-active');
    });

</script>

</html>